<template>
  <div class="farm-main">
    <!-- <div class="tr-sid">
      <TreePond class="tree" @treeselectvalue="treeselectvalue"></TreePond>
    </div> -->
    <div id="video_container" class="cameraview-box">
      <!-- 预热加载动画 -->
      <div v-if="startUp === 'true' && cricleAdd" class="cricle">
        <countDown :start-time="startTime" :step="-1" />
        <p>预热加载中,请耐心等待</p>
      </div>
      <!-- <iframe  :src="nowcameraurl" style="width: 100%; height: 100%"></iframe> -->
      <div v-if="showFace === 'play'" style="width: 100%; height: 100%">
        <div id="video-container" style="width: 100%; height: 100%"></div>
      </div>
      <div v-if="showFace === 'notCameraList'" style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            ">
        <h1>暂无摄像头</h1>
      </div>
      <div v-if="showFace === 'downFlow'" style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            ">
        <h1>萤石云流量不足，功能受限</h1>
      </div>
      <div v-if="showFace === 'transCamera'" style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "></div>
      <div v-if="showFace === 'notCameraData'" style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            ">
        <h1>未取得该摄像头数据</h1>
      </div>
      <div v-if="showFace === 'timeout'" style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            ">
        <h1>静置超时，请刷新重新启动</h1>
      </div>
    </div>
    <div class="cameralist-box">
      <zhcameralist ref="cameralist" :cameralistparam="paramslist" @nowcameraurl="getcamerurl"
        @getUploadTime="handleLoading" />
    </div>
  </div>
</template>

<script>
import zhcameralist from "./cameralist.vue";
import MainSlot from "@/components/MainSlot";
import TableData from '@/components/TableData';
import countDown from "@/components/count-down/index";
import screenfull from "screenfull";
import TreePond from '@/components/TreePond';
import nowpagereq from "@/api/video-surveillance.js";
import EZUIKit from 'ezuikit-js';
var player = null
export default {
  name: "VideoSurveillance",
  components: { MainSlot, TableData, zhcameralist, countDown, TreePond },
  data() {
    return {
      resetIframe: false,
      camera: {},
      cameraId: "",
      cameralist: [], // 摄像头列表
      startTime: 60,
      cricleAdd: false,
      startUp: "false",
      showscreen: true,
      loading: false,
      // 表格选中id
      tableselectidlist: "",
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      // 当前选中cameraindex
      nowcameraindex: "",
      addcameraVisible: false,
      paramslist: {},
      // 当前视频播放地址
      nowcameraurl: "",
      // 是否展示视频窗口
      showFace: "transCamera",
      timer: null
    };
  },
  mounted() {
    const element = document.getElementById("video_container");
    const full_screen = document.getElementById("full_screen")
    full_screen && full_screen.addEventListener("click", () => {
      if (screenfull.isFullscreen) {
        this.showscreen = true;
        screenfull.toggle();
      } else {
        if (screenfull.isEnabled) {
          screenfull.request(element); // 元素全屏
          this.showscreen = false;
        }
      }
    });
  },
  deactivated() {
    clearTimeout(this.timer);
    this.timer = null;
    player.stop();
  },
  // beforeDestroy() {
  //   clearTimeout(this.timer);
  //   this.timer = null;
  // },
  methods: {
    getcamerme(item) {
      this.cameraId = item.cameraId;
    },
    getcamerurl(e, method = undefined) {
      // 不存在地址 不展示摄像头
      // console.log(e)
      player?.stop();
      if (document.getElementById('video-container-wrap')) {
        let e = document.getElementById("video-container-wrap");
        e.style.display = "none";
      }
      if (e === "transCamera") {
        // 切换摄像头
        this.showFace = "transCamera";
        this.loading = false;
        this.cricleAdd = false;
        clearTimeout(this.timer);
        return;
      } else if (e === "downFlow") {
        // 流量不足无法播放
        this.showFace = "downFlow";
        this.loading = false;
        return;
      } else if (e === "notCameraData") {
        // 未获取到该摄像头数据
        this.showFace = "notCameraData";
        this.loading = false;
        return;
      } else if (e === "notCameraList") {
        // 暂无摄像头
        this.showFace = "notCameraList";
        this.loading = false;
        return;
      } else if (e === "timeout") {
        this.showFace = "timeout";
        this.loading = false;
        return;
      } else {
        this.loading = false;
      }
      this.nowcameraurl = e;
      let that = this;
      setTimeout(() => {
        this.resetIframe = true;
        this.showFace = "play";
        if (player) {
          player.stop();
        }
        if (method !== undefined) {
          player = new EZUIKit.EZUIKitPlayer({
            audio: 1, enableSharedArrayBufferGuide: true, width: 1980,
            height: 1080, template: 'security', ...method,
            handleError: function (e) {
              that.$refs.cameralist.sendErrorInfo(e)
            },
            handleSuccess: function (e) {
              that.$refs.cameralist.sendWebSocket(200)
            },
          })
          // player.reSize('100%', '100%');
          player.stop().then(() => {
            player.play();
          });
        }
      }, 200);
    },
    // 点击树状触发方法
    treeselectvalue(e) {
      console.log(e)
      let dd = e.organizationNo || sessionStorage.organizationNo;
      this.paramslist = {};
      if (!dd) {
        this.$message.warning("请勿选择此地块组");
        return;
      }
      this.facilityName = e.facilityName;
      this.addActive = true;
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
      };
      //关闭ws
      this.$refs.cameralist.wsClientClose()
      this.getTableDataList();
    },
    // 获取相机列表数据
    getTableDataList() {
      let e = this.paramslist;
      // console.log(e)
      this.paramslist = {};
      if (e.facilityGroupNo) {
        this.cameralist = []
        return;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
        let partwo = {
          page: 1,
          size: 10,
          entity: {
            facilityNo: e.facilityNo
          }
        };
        nowpagereq.getlist(partwo).then(res => {
          let data = res.data.content;
          this.cameralist = data;
        });
      }
    },
    // 点击相机，获取相机数据，拼接完整video路径
    clickcamerames(e) {
      let nowcamerid = e.cameraid;
      console.log('点击相机，获取相机数据，拼接完整video路径', nowcamerid);
    },
    // 参数1：时长 参数2：是否预热
    handleLoading(durTime, startUp) {
      this.timer = null;
      this.startUp = startUp;
      this.startTime = 60;
      this.cricleAdd = true;
      this.timer = setTimeout(() => {
        this.cricleAdd = false;
      }, durTime * 60000 + 200);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .slotModule {
  padding: 10px;
  background: #f3f3f3;
  box-shadow: none;
}

::v-deep .el-select .el-input__inner {
  color: #272929 !important;
}

::v-deep {
  .zhcontent {
    overflow: hidden !important;
  }
}

.main {
  width: 100%;
  height: 100%;
}

.farm-main {
  width: 1150px;
  height: 750px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;

  .tr-sid {
    width: calc(20% - 15px);
    height: 100%;
    padding: 0 10px 10px;
    background-color: #ffffff;
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
    border-radius: 6px;

    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }
  }

  .cameraview-box {
    width: 830px;
    height: 100%;
    border: 8px double #fff;
    background-color: #363839;
    position: relative;

    .cricle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .allScream {
      position: absolute;
      font-size: 24px;
      right: 10px;
      bottom: 10px;
    }
  }

  .cameralist-box {
    width: 300px;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
    border-radius: 6px;
    color: #ffffff;
  }
}

// #video-container {
//   width: 100% !important;
//   height: 100% !important;
// }
::v-deep {
  #video-container-wrap {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;

    #video-container-headControl {
      display: none !important;
    }

    #video-container {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;

      .video-containerparent-wnd {
        >div {
          max-width: 100% !important;
          max-height: 100% !important;
          width: 100% !important;
          height: 100% !important;
        }
      }

      #video-containercanvas0 {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
}

::v-deep #loading-icon {
  display: none;
}
</style>
